<template>
    <div>
        <Row class="toolBar" justify="space-between">
            <i-col span="12">
                <Tooltip  content="查看详细" placement="bottom-start" transfer>
                    <Button type="ghost" >
                        <Icon type="clipboard"></Icon>
                    </Button>
                </Tooltip>
            </i-col>
            <i-col span="12">
                <Button-group style="float: right;">
                    <Tooltip content="刷新" placement="bottom-start" transfer>
                        <Button type="ghost" @click="refresh">
                            <Icon type="loop"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出全部数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(1)">
                            <Icon type="arrow-down-a"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出当前页数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(2)">
                            <Icon type="ios-download-outline"></Icon>
                        </Button>
                    </Tooltip>
                    </Button-group>
                    <Input v-model="searchKey" icon="ios-search-strong" placeholder="请输入..." style="width:200px;float:right;">
                    </Input>
            </i-col>
        </Row>
        <Table ref="table2" 
            highlight-row
            :columns="columns" :data="dataAll">
        </Table>
        <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="totals" :current="current" :pageSize="pageSize" :page-size-opts="pageSizeOpts" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-total show-sizer></Page>
        </div>
    </div>
    </div>
</template>

<script>
import { timeFormat } from "@/common/filter";
export default {
  // 入库单
  name: "sin",
  data() {
    return {
      dataAll: [],
      pageSize: 10,
      pageSizeOpts: [10, 20, 50, 100],
      totals: 0,
      current: 1,
      pagedata: {
        pagesize: 10,
        page: 1,
        searchKey: "",
        sortby: ["Ctime"],
        order: ["desc"]
      },
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
          title: "排序"
        },
        {
          title: "订单名称",
          key: "BuyName"
        },
        {
          title: "状态",
          key: "Status",
          render: (h, params) => {
            let str = params.row.Status == 1 ? "未入库" : "已入库";
            let color = params.row.Status == 1 ? "yellow" : "green";
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color
                }
              },
              str
            );
          }
        },
        {
          title: "责任人",
          key: "Creater"
        },
        {
          title: "备注",
          key: "Remark"
        },
        {
          title: "修改时间",
          key: "Utime",
          render: (h, params) => {
            return h("span", {}, timeFormat(params.row.Utime));
          }
        },
        {
          title: "操作",
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: "primary",
                  size: "small"
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                    click: () => {
                        this.gotoContent(params.row.Id)
                    }
                }
              }, "详情"),
             h('Button', {
                props: {
                  type: "warning",
                  size: "small",
                  disabled: params.row.Status == 1 ? false: true
                },
                style: {
                  marginLeft: '5px'
                },
                on: {
                    click: () => {
                        this.up2Storage(params.row.Id)
                    }
                }
              }, "确认入库")
            ])         
          }
        }
      ],
      searchKey: "",
      selectRows: [],

    };
  },
  methods: {
    getAll(pd) {
      this.loading = true;
      this.$api.GetDaiSongJian().then(res => {
        if (!res.error) {
          this.dataAll = res.Data.data;
          this.totals = res.Data.total;
        } else {
          this.$Message.error(res.message);
        }
        this.loading = false;
      });
    },
    refresh() {
      this.getAll(this.pagedata);
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.table2.exportCsv({
          filename: "原始数据",
          quoted: true
          //            columns: this.columns.filter((col, index) => index < 5),
          //            data: this.thisTableData,
        });
      } else if (type === 2) {
        this.$refs.table2.exportCsv({
          filename: "排序和过滤后的数据",
          original: false,
          quoted: true
        });
      }
    },
    changePage(current) {
      this.current = current;
    },
    changeSize(current) {
      this.pageSize = current;
    },
    gotoContent(id) {
        console.debug(id)
        this.$router.push({
        name: '入库单明细',
        params: {
          BusyId: id
        }
      })
    },
    selectRow(selection) {
      this.selectRows = selection
    },
    up2Storage(id) {
      let data = {
        sinId : id
      }
      this.$api.up2Store(data).then(res => {
        if (!res.error) {
          this.$Message.success("已入库！")
          this.getAll(this.pagedata)
        } else {
          this.$Message.error(res.message)
        }
      })
    }
  },
  mounted() {
    this.getAll(this.pagedata);
  }
};
</script>

<style scoped>
.toolBar {
  margin-bottom: 10px;
}

.ivu-dropdown {
  margin: 0px;
}

.tCheck {
  padding-left: 10px;
  float: left;
  clear: left;
  z-index: 9999;
}
</style>